
<template>
  <div class="financeWrap">
    <div class="financeInner flexColumn" :style="{transform: zoom, left: left}">
      <Top :title="'生产线制作过程异常报警监控'"></Top>
      <div class="contentBox flex1 flex">
        <!-- 左边 -->
        <div class="leftBox shadowBox flexColumn">
          <div class="topRight"></div>
          <div class="bottomLeft"></div>
          <div class="titleWrap">告警统计</div>
          <div class="dateChooseBox flex mt10">
            <span
              v-for="(item, i) in optionList"
              :key="i + 'optionList'"
              :class="{'active': nowIndex === i}"
              class="finger"
              @click="nowIndex = i"
            >{{ item.name }}</span>
          </div>
          <div class="leftTopChartBox mt10 flex">
            <div v-for="i in leftChartsList" :key="'leftChartsList' + i.name">
              <pieCharts :dataList="i"></pieCharts>
            </div>
          </div>
          <div class="titleWrap">良品率</div>
          <div class="flex1 flex leftBottomChartBox">
            <div class="flexColumn" v-for="i in leftChartsLis2" :key="i.data.name + 'list2'">
              <div class="flex1">
                <pieCharts :dataList="i.data"></pieCharts>
              </div>
              <div class="textBox">
                <span>实际量：</span>
                <span class="color-green">{{ i.realNum }}</span>个
              </div>
              <div class="textBox">
                <span>总数量：</span>
                <span class="color-yellow">{{ i.allNum }}</span>个
              </div>
            </div>
          </div>
        </div>
        <!-- 中间 -->
        <div class="centerBox flexColumn">
          <div class="titleBox shadowBox flex-center">
            <div class="topRight"></div>
            <div class="bottomLeft"></div>
            <img src="@/assets/alarmBox/listener.png" />
            <span class="mlr40">今日巡检监控:</span>
            <div class="numberBox flex">
              <div
                class="color-shallowRed"
                v-for="(i, index) in num"
                :key="index + 'numText'"
              >{{ i }}</div>
            </div>
          </div>
          <div class="videoBox shadowBox flex1 flexColumn">
            <div class="topRight"></div>
            <div class="bottomLeft"></div>
            <!-- <div class="videoHeader flex-align-center">
              <div style="width: 40%;">
                <div class="titleWrap">实时监控</div>
              </div>
              <div class="typeChooseBox flex flex1">
                <span
                  v-for="(item, i) in seqList"
                  :key="i + 'optionList'"
                  :class="{'active': currentType === i}"
                  class="finger"
                  @click="currentType = i"
                >{{ item.seqName }}</span>
              </div>
            </div>-->
            <div class="flex flex-Title mt10">
              <div
                @click="allSeq(index)"
                :class="{styleName:index == current}"
                v-for="(item,index) in seqList"
                :key="index"
              >{{item.seqName}}</div>
            </div>

            <div class="flex1 videoView">
              <Flvvideo :url="seqList[current].url" :id="seqList"></Flvvideo>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="rightBox shadowBox">
          <div class="topRight"></div>
          <div class="bottomLeft"></div>
          <div class="titleWrap">报警趋势</div>
          <div class="rightChartsBox">
            <lineCharts :id="'lineCharts1'"></lineCharts>
          </div>
          <div class="titleWrap">告警时间轴</div>
          <div class="rightTimeBox">
            <div class="flex1 flexColumn" style="overflow: auto;height:400px;">
              <div
                v-for="(item, index) in alermFile"
                :key="'alarmList' + index"
                class="itemBox finger"
                @click="openAlarmWindow = true"
              >
                <div class="itemTop relative">
                  <span class="round bg-red"></span>
                  <div style="display:block;width:100%;color:#fff">【{{ item.alertTypeName }}】</div>
                  <div style="display:block" class="color-red">{{ item.alertTitle }}</div>
                </div>
                <div class="itemBottom">
                  <span class="color-red">{{ item.status }}</span>
                  <span>{{ util.timeFormat2(item.alertCreateTime) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import HlsVideo from '@/components/_Hlsvideo/Hlsvideo'
import Flvvideo from '@/components/_Flvvideo/Flvvideo'
import Top from '@/components/_Header/Top'
import pieCharts from './charts/pieCharts.vue'
import lineCharts from './charts/lineCharts.vue'
import serve from '@/api/financeBoard'
import cookies from '@/utils/cookies'
import { putAction, postAction, getAction } from '@/api/manage'
// import request from '@/utils/request'
export default {
  components: { Top, pieCharts, lineCharts, Flvvideo },
  data() {
    return {
      zoom: 'scale(1)',
      left: 0,
      fullScreenDom: null,
      alermFile: [], //报警
      videoPath: 'http://192.168.12.88:8088/rtsp/0F5B6FBB/hls.m3u8',
      optionList: [
        { name: '今天', value: 'date' },
        { name: '昨天', value: 'date' },
        { name: '近7天', value: 'date' },
        { name: '本月', value: 'date' },
      ],
      current: 0,
      currentType: 0,
      seqList: [
        { id: 1, seqName: 'SMT', url: 'http://192.168.12.88:8088/rtsp/359C8AA8.flv' },
        { id: 2, seqName: 'DIP', url: 'http://192.168.12.88:8088/rtsp/05D3F8D3.flv' },
        { id: 3, seqName: 'TEST', url: 'http://192.168.12.88:8088/rtsp/0702EB2D.flv' },
        { id: 4, seqName: 'PACK', url: 'http://192.168.12.88:8088/rtsp/400E51BB.flv' },
      ],
      nowIndex: 0,
      leftChartsList: [
        { name: '累计报警', value: 50, color: '#FF0C0C', unit: '次' },
        { name: '待处理', value: 20, color: '#FF690C', unit: '次' },
        { name: '已处理', value: 30, color: '#67FF6E', unit: '次' },
        { name: '高危报警', value: 10, color: '#FF0C0C', unit: '次' },
        { name: '中危报警', value: 20, color: '#FF690C', unit: '次' },
        { name: '低危报警', value: 20, color: '#FFFC0C', unit: '次' },
      ],
      leftChartsLis2: [
        { allNum: 18999, realNum: 16124, unit: '个', data: { name: 'SMT', value: 97, color: '#09C49A', unit: '%' } },
        { allNum: 16599, realNum: 14124, unit: '个', data: { name: 'DIP', value: 91, color: '#09C49A', unit: '%' } },
        { allNum: 14959, realNum: 12124, unit: '个', data: { name: 'TEST', value: 93, color: '#09C49A', unit: '%' } },
        { allNum: 15999, realNum: 14124, unit: '个', data: { name: 'PACK', value: 97, color: '#09C49A', unit: '%' } },
      ],
      num: '0,017,637',
    }
  },
  created() {
    this.almList()
  },
  mounted() {
    this.fullScreenDom = document.querySelector('.fullScreenBox')
    this.changeProp()
    window.onresizeArr.push(this.changeProp)
  },
  methods: {
    allSeq(index) {
      this.current = index
      if (this.current == 0) {
        this.videoPath == 'http://192.168.12.88:8088/rtsp/0F5B6FBB/hls.m3u8'
        console.log(this.videoPath)
      } else if (this.current == 1) {
        this.videoPath == 'http://192.168.12.88:8088/rtsp/EA88E054/hls.m3u8'
        console.log(this.videoPath)
      } else if (this.current == 2) {
        this.videoPath == 'http://192.168.12.88:8088/rtsp/4A3F73F4/hls.m3u8'
        console.log(this.videoPath)
      } else {
        this.videoPath == 'http://192.168.12.88:8088/rtsp/0F5B6FBB/hls.m3u8'
        console.log(this.videoPath)
      }
    },
    changeProp() {
      let timeOut = setTimeout(() => {
        clearTimeout(timeOut)
        let height = document.querySelector('.financeWrap').offsetHeight
        let width = document.querySelector('.financeWrap').offsetWidth
        let prop = height / 1080
        this.zoom = 'scale(' + prop + ')'
        if (this.fullScreenDom.offsetHeight === window.screen.height) {
          if (prop === 1) {
            this.left = 0
            return
          }
          let innerWidth = (window.innerWidth - document.querySelector('.financeInner').offsetWidth * prop) / 2
          this.left = innerWidth + 'px'
        } else {
          this.left = (width - 1832 * prop) / 2 + 'px'
        }
      }, 100)
    },
    //生产报警
    almList() {
      let self = this
      let params = Object.assign({
        alertTypeNames: '2',
      })
      postAction('http://192.168.11.142:8000/api/alert/head/queryByAlertTypeName', params).then((res) => {
        if (res.code == 200) {
          self.alermFile = res.data
        } else {
          self.$message.warning(res.msg)
        }
      })
    },
  },
}
</script>

<style scoped lang='less'>
.financeWrap {
  overflow: hidden;
  font-size: 12px;
  background-color: #000051;
  height: 100%;
  width: 100%;
  .financeInner {
    position: relative;
    margin: 0 auto;
    width: 1832px;
    height: 1080px;
    transform-origin: 0 0;
    .contentBox {
      background: transparent;
      box-sizing: border-box;
      padding: 20px;
      .leftBox,
      .rightBox {
        width: 33%;
        height: 100%;
      }
      .leftBox {
        .dateChooseBox {
          height: 26px;
          color: white;
          line-height: 26px;
          font-size: 14px;
          justify-content: center;
          span {
            margin-left: 10px;
            padding: 0 10px;
          }
          .active {
            background-color: #003a8c;
            border-radius: 2px;
          }
        }
        .leftTopChartBox {
          height: 300px;
          width: 100%;
          flex-wrap: wrap;
          & > div {
            width: 33%;
            height: 150px;
            // background-color: thistle;
          }
        }
        .leftBottomChartBox {
          flex-wrap: wrap;
          & > div {
            width: 50%;
            height: 50%;
            .textBox {
              height: 30px;
              width: 100%;
              text-align: center;
              color: white;
              font-size: 14px;
            }
          }
        }
      }
      .rightBox {
        .rightChartsBox {
          height: 400px;
          width: 100%;
        }
        .rightTimeBox {
          height: 400px;
          width: 100%;
          overflow: auto;
          .itemBox {
            margin-top: 10px;
            height: 80px;
            padding-left: 30px;
            font-size: 16px;
            color: #fff;
            .itemBottom {
              padding: 0 10px;
              text-align: right;
              justify-content: space-between;
            }
          }
        }
      }
      .centerBox {
        width: 55%;
        margin: 0 1%;
        height: 100%;
        .titleBox {
          height: 156px;
          margin: 20px 0;
          img {
            height: 70%;
          }
          span {
            color: white;
            font-size: 24px;
          }
          .numberBox {
            height: 60px;
            div {
              height: 100%;
              width: 36px;
              margin-right: 6px;
              background-color: #00267c;
              text-align: center;
              line-height: 60px;
              font-size: 40px;
            }
          }
        }

        .videoBox {
          .videoHeader {
            height: 50px;
            .typeChooseBox {
              height: 26px;
              color: white;
              line-height: 26px;
              font-size: 14px;
              justify-content: center;
              span {
                margin-left: 10px;
                padding: 0 10px;
              }
              .active {
                background-color: #003a8c;
                border-radius: 2px;
              }
            }
          }
          .videoView {
            background-color: black;
            margin: 20px 0;
            overflow: hidden;
            video {
              width: 440px;
              height: 440px;
              // flex: 1;
            }
          }
        }
        .flex-Title {
          color: #fff;
          font-size: 16px;
          width: 70%;
          height: 30px;
          line-height: 30px;
          & > div {
            width: 16%;
            text-align: center;
            cursor: pointer;
            margin: 0 20px;
          }
        }
        .flex-Cont {
          // width: 490px;
        }
        .styleName {
          height: 30px;
          border-radius: 5px;
          line-height: 30px;
          color: #fff;
          background-color: #3190f3;
        }
      }
    }
  }
}
</style>
